<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="authoring-tool" content="Adobe_Animate_CC">
    <title>02</title>
    <!-- write your code here -->
    <script src="./static/common/gsap.js"></script>
    <script src="./static/common/jq.js"></script>
    <link rel="stylesheet" href="./static/common/common.css">
    <script src="./static/common/common.js"></script>
   

</head>

<body>
    <div class="main pos_r">
        <div class="title">HISTORY</div>
        <div class="flex_x between">
            <div class="desc">
                Hot pot, ancient known as "antique soup". <br>
                Named for the "goo-dong" sound made when food is thrown <br>
                into boiling water, it is one of the original Chinese delicacies <br>and is also a food suitable for all
                ages. Hot pot is not only a way of cooking,but
                also a symbol of culture. <br>
                Hot pot generally refers to a pot as an instrument, a heat <br>
                source to boil the pot, water or soup to boil
                all kinds of food <br> cooking methods. <br>
                It can also refer to the cooking utensils used in this way. It is <br>
                characterized by cooking while eating,
                or the pot itself has a <br>
                thermal insulation effect. Eat hot pot if you have gout then you <br>
                can drink with
                low food to prevent gout recurrence. Hot pot is <br>
                hot to eat, spicy salty, oil and not greasy, relief of
                dampness, <br>
                suitable for the climate of mountains and rivers, today's <br> development into a mandarin duck
                pot, spicy, light, each takes <br> what he needs, according to personal preferences with <br> different
                soup
                ingredients, food, suitable for all ages, to winter. <br>
                Typical hot pot ingredients include a variety of meat, seafood, <br> vegetables, soy products,
                mushrooms, egg
                products, staple <br> foods, etc., which are boiled in water or the bottom of a special <br> stock pot
                after
                boiling. Some recipes are also served with <br> condiments.
            </div>
            <div class="right">
                <img class="w100" src="./images/1233.png" alt="">
            </div>
        </div>
        <div class="page pos_a">
            <ul class="flex_y">
                <a href="./index.html"><li>01</li></a>
                <li class="active">02</li>
                <a href="./page3.html"><li>03</li></a>
                <a href="./page3.html"><li >03</li></a>
                <a href="./page4.html"><li>04</li></a>
                <a href="./page5.html"><li>05</li></a>
            </ul>
        </div>
        <div class="cho pos_a">
            <img class="w100" src="./images/image 4.png" alt="">
        </div>
    </div>
</body>
<script>
   $(function(){
     window.onload = function(){
        $('.main').show()
     }
   })
    gsap.set('.right img', {x: -810, y: 240,scale: .5,});
    gsap.to(".right img", {
        x: 0,
        y: 0,
        scale: 1, // 放大倍数  
  ease: "powerOut", // 定义动画的速度曲线  
    });
</script>
<style>
    .main {
        background-image: url("./images/背景\ 2.png");
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        padding: 80px 49px 74px 98px;
    }

    .cho {
        width: 300px;
        height: 159px;
        top: 74px;
        right: 242px;
    }

    .title {
        font-size: 59px;
        color: #fff;
        margin-left: 162px;
    }

    .desc {
        color: #fff;
        font-size: 20px;
        text-align: center;
        width: 589px;
        line-height: 28px;
    }

    .right {
        width: 460px;
        height: 460px;
        margin-top: 40px;
    }
</style>

</html>